<!doctype html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>预览</title>
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }
    :root {
      --big-font-size:16px;
      --tip-font-size:12px;
      --circle-width:32px;
      --circle-height: 32px;
      --button-height: 32px;
      --font-size: 14px;
      --border-radius: 4px;
      --primary : #2d8cf0;
      --warn :#ff9900;
      --success:#19be6b;
      --error:#ed4014;
      --light-primary:#5cadff;
      --active-primary:#2b85e4;
      --text-color:#515a6e;
      --disabled:#c5c8ce;
      --button-color:#fff;
    }
    body {
	    margin: 0;
      font-style: var(--font-size);
	    padding: 150px;
    }

    #app {
	    padding: 8px;
    }
    .demo {
	    width: 100%;
	    border: 1px solid red;
	    min-height: 150px;
    }
  </style>
</head>
<body>
<div id="app">
	<!--	<div>-->
	<!--		只打开一个-->
	<!--		<v-collapse :selected-arr.sync="selected" :single="true">-->
	<!--			<v-collapse-item name="1" title="我是标题">-->
	<!--				<div>我是内容</div>-->
	<!--			</v-collapse-item>-->
	<!--			<v-collapse-item name="2" title="我是标题">-->
	<!--				<div>我是内容</div>-->
	<!--			</v-collapse-item>-->
	<!--			<v-collapse-item name="3" title="我是标题">-->
	<!--				<div>我是内容</div>-->
	<!--			</v-collapse-item>-->
	<!--		</v-collapse>-->
	<!--	</div>-->
	<!--	<div>-->
	<!--		同时打开多个-->
	<!--		<v-collapse :selected-arr.sync="selected2">-->
	<!--			<v-collapse-item name="1" title="标题一">-->
	<!--				<div>我是内容</div>-->
	<!--			</v-collapse-item>-->
	<!--			<v-collapse-item name="2" title="标题二">-->
	<!--				<div>我是内容</div>-->
	<!--			</v-collapse-item>-->
	<!--			<v-collapse-item name="3" title="标题三">-->
	<!--				<div>我是内容</div>-->
	<!--			</v-collapse-item>-->
	<!--		</v-collapse>-->
	<!--	</div>-->
	<!--	<v-popover style="margin:20px" :need-title="true">-->
	<!--		<template #title>-->
	<!--			我是一个标题-->
	<!--		</template>-->
	<!--		<div slot="content">-->
	<!--			哈哈哈哈哈哈哈哈嗝-->
	<!--		</div>-->
	<!--		<v-button>-->
	<!--			我有标题-->
	<!--		</v-button>-->
	<!--	</v-popover>-->
	<!--	<v-popover style="margin:20px" position="bottom" trigger="hover">-->
	<!--		<div slot="content">我是内容</div>-->
	<!--		<v-button>hover me</v-button>-->
	<!--	</v-popover>-->
	<!--	<v-popover style="margin:20px" position="left">-->
	<!--		<div slot="content">我是内容</div>-->
	<!--		<v-button>点我</v-button>-->
	<!--	</v-popover>-->
	<!--	<v-popover style="margin:20px" position="right">-->
	<!--		<div slot="content">我是内容</div>-->
	<!--		<v-button>点我</v-button>-->
	<!--	</v-popover>-->
	<!--	<v-tab :selected.sync="selectName">-->
	<!--		<v-tab-head>-->
	<!--			<button slot="action">设置</button>-->
	<!--			<v-tab-item name="social">-->
	<!--				<v-icon style="margin-right:8px" name="icon"></v-icon>-->
	<!--				社会-->
	<!--			</v-tab-item>-->
	<!--			<v-tab-item name="cultural" disabled>-->
	<!--				人文-->
	<!--			</v-tab-item>-->
	<!--			<v-tab-item name="history">-->
	<!--				历史-->
	<!--			</v-tab-item>-->
	<!--			<v-tab-item name="technology">-->
	<!--				科技-->
	<!--			</v-tab-item>-->
	<!--		</v-tab-head>-->
	<!--		<v-tab-body>-->
	<!--			<v-tab-pane name="social">-->
	<!--				社会-->
	<!--			</v-tab-pane>-->
	<!--			<v-tab-pane name="cultural">-->
	<!--				人文-->
	<!--			</v-tab-pane>-->
	<!--			<v-tab-pane name="history">-->
	<!--				历史-->
	<!--			</v-tab-pane>-->
	<!--			<v-tab-pane name="technology">-->
	<!--				科技-->
	<!--			</v-tab-pane>-->
	<!--		</v-tab-body>-->
	<!--	</v-tab>-->
	<!--	<div style="padding: 20px">-->
	<!--		<v-row gutter="24">-->
	<!--			<v-col span="6">-->
	<!--				<div>1</div>-->
	<!--			</v-col>-->
	<!--			<v-col span="12">-->
	<!--				<div>2</div>-->
	<!--			</v-col>-->
	<!--			<v-col span="6">-->
	<!--				<div>3</div>-->
	<!--			</v-col>-->
	<!--		</v-row>-->
	<!--		<v-row style="margin-top:20px">-->
	<!--			<v-col span="10">-->
	<!--				<div>1</div>-->
	<!--			</v-col>-->
	<!--			<v-col span="10" offset="2">-->
	<!--				<div>2</div>-->
	<!--			</v-col>-->
	<!--			<v-col span="2">-->
	<!--				<div>3</div>-->
	<!--			</v-col>-->
	<!--		</v-row>-->
	<!--		<v-row style="margin-top:20px">-->
	<!--			<v-col span="24" :ipad="{span:6}" :pc="{span:10}">-->
	<!--				<div>1</div>-->
	<!--			</v-col>-->
	<!--			<v-col span="24" :ipad="{span:6}" :pc="{span:8}">-->
	<!--				<div>2</div>-->
	<!--			</v-col>-->
	<!--			<v-col span="24" :ipad="{span:6}" :pc="{span:2}">-->
	<!--				<div>3</div>-->
	<!--			</v-col>-->
	<!--			<v-col span="24" :ipad="{span:6}" :pc="{span:4}">-->
	<!--				<div>3</div>-->
	<!--			</v-col>-->
	<!--		</v-row>-->
	<!--	</div>-->
	<!--  <div style="margin-bottom: 20px;">-->
	<!--    <v-input @input="tests"></v-input>-->
	<!--    <v-input v-model="msg"></v-input>-->
	<!--    <p>{{msg}}</p>-->
	<!--  </div>-->
	<!--		<v-button @click="tests">-->
	<!--	    默认-->
	<!--	  </v-button>-->
	<!--		<v-button icon="settings" @click="tests('top')">-->
	<!--			图标按钮-->
	<!--		</v-button>-->
	<!--		<v-button type="primary" @click="tests('bottom')">-->
	<!--			类型按钮-->
	<!--		</v-button>-->
	<!--	  <v-button type="warn" icon="search" :is-loading="true" icon-position="right">-->
	
	<!--	  </v-button>-->
	<v-button type="error" icon="search">
		失败按钮
	</v-button>
	<v-button type="success" shape="round" icon="settings">
		圆角按钮
	</v-button>
	<!--  <v-button shape="circle" icon="search"></v-button>-->
	<!--	  <button-group>-->
	<!--	    <v-button icon="left">Go back</v-button>-->
	<!--	    <v-button> more </v-button>-->
	<!--	    <v-button icon="right" icon-position="right">Go next</v-button>-->
	<!--	  </button-group>-->
	<!--	<br>-->
	<!--	<v-layout class="demo">-->
	<!--		<v-head class="demo"> head</v-head>-->
	<!--		<v-layout>-->
	<!--			<v-content class="demo"> content</v-content>-->
	<!--			<v-side class="demo">sider</v-side>-->
	<!--		</v-layout>-->
	<!--		<v-foot class="demo"> foot</v-foot>-->
	<!--	</v-layout>-->
</div>
<script src="./src/app.js"></script>
</body>
</html>